<template>
  <div class="contentHead" id="contentHead">
    <div class="content_button">
      <div>
        <a-dropdown v-if="props.channelId || route.query.channelId">
          <a-button class="addButton" type="primary" @click="addClick" :disabled="modelData == null">
            <template #icon>
              <span class="iconfont icon-Add iconadd"></span>
            </template>
            新建
            <i class="iconfont icon-down" style="font-size: 24px; color: #ffffff; margin-left: 4px" />
          </a-button>
          <template #overlay>
            <a-menu>
              <a-menu-item v-for="item in modelData">
                <a @click="addRecord(item.id, item.name)">{{ item.name }}</a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
        <!-- <a-button class="importButton" @click="batchAddRecord">回收站</a-button> -->
        <a-button class="importButton" @click="sortRecord">排序</a-button>

        <!-- <a-button class="importButton" @click="fileRecord">归档</a-button> -->
      </div>
      <div class="displaySwitch">
        <i class="iconfont icon-a-Graphiclist" :class="isSwith == 1 && 'swithys'" @click="swith(1)" :title="'ss'"></i>
        <i class="iconfont icon-table" :class="isSwith == 2 && 'swithys'" @click="swith(2)"></i>
      </div>
    </div>

    <div class="select-content">
      <div class="select-item">
        <!-- <a-select
          class="titleSelect"
          v-model:value="resData.title"
          :options="titleOptions"
          @change="onSelectType"
        ></a-select> -->
        <div class="title">标题、作者：</div>
        <a-input v-model:value="resData.title" placeholder="请输入标题或作者" style="width: 241px">
        </a-input>
      </div>
      <div class="select-item">
        <div class="title">内容状态：</div>
        <a-select v-model:value="resData.status" :options="typeOptions" @change="onSelectType"></a-select>
      </div>
      <div class="select-item" v-show="!isOpen">
        <div class="title">内容类型：</div>
        <a-select v-model:value="resData.typeId" :options="contentData" @change="onSelectType3" :fieldNames="{
          label: 'typeName',
          value: 'id',
        }"></a-select>
      </div>
      <div class="select-item" v-show="!isOpen">
        <a-select class="titleSelect" v-model:value="timeType" :options="timeOptions" @change="onSelectType"></a-select>
        <a-range-picker show-time v-model:value="timeValue" :valueFormat="valueFormat" @change="changeTime" />
      </div>
      <div class="select-item" v-show="!isOpen">
        <div class="title">排序方式：</div>
        <a-select v-model:value="resData.sortType" :options="sortOptions" @change="onSelectType5"></a-select>
      </div>
      <div class="select-item" v-show="!isOpen && contentSecretIsOpen">
        <div class="title">内容密级：</div>
        <a-select v-model:value="resData.secretId" :options="securityOptions" @change="onSelectType6"
          :fieldNames="fieldNames"></a-select>
      </div>
      <div class="select-item" v-show="!isOpen">
        <div class="title">内容创建方式：</div>
        <a-select v-model:value="resData.bornType" :options="createOptions" @change="onSelectType7"></a-select>
      </div>
      <div class="option-content">
        <a-button @click="resetOptions">重置</a-button>
        <a-button :style="{ 'margin-left': '8px' }" class="addButton" type="primary" @click="search()">搜索</a-button>
        <div class="openorclose" @click="openorclose" v-show="!isOpen">
          <a>收起</a>
          <i class="iconfont icon-up" style="font-size: 24px"> </i>
        </div>
        <div class="openorclose" @click="openorclose" v-show="isOpen">
          <a>展开</a>
          <i class="iconfont icon-down" style="font-size: 24px"> </i>
        </div>
      </div>
    </div>
  </div>
  <sortModel v-if="isSortVisible" :isVisible="isSortVisible" @handleCancle="isSortVisible = false"></sortModel>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick, createVNode, computed, watch } from "vue";
import request from "@/api/index";
import sortModel from "./sortModel.vue";
import { Modal, message } from "ant-design-vue";
import { useRoute, useRouter } from "vue-router";
const isOpen = ref<boolean>(true); //是否展开或收起.
const isSwith = ref<number>(1); //图文或列表.
const emit = defineEmits(["swith", "changePage", "resetOptions", "changeOpen"]);
const props = defineProps({
  resData: {
    type: Object,
    default: {},
  },
  channelId: {
    type: Number,
    default: null,
  },
  contentData: {
    default: [] as any[],
  },
});
interface dataSourceType {
  [propName: string]: any;
}
// route
const route = useRoute();
const resData = ref<dataSourceType>(props.resData);
const router = useRouter();
const valueFormat = ref("YYYY-MM-DD HH:mm:ss");
const timeValue = ref<(string | number)[]>([]);
const timeType = ref<string | number>(1);
const securityOptions = ref<(string | number)[]>([]);
const sortOptions = ref<dataSourceType>([]);
const modelData = ref<dataSourceType>([]);
const isSortVisible = ref(false); //控制是否展示排序对话框
const contentSecretIsOpen = ref<any>('');
// let resData: dataSourceType = reactive({
//   //头部筛选请求参数格式
//   pageNumber: 0,
//   pageSize: 10,
//   title: "标题",
//   name1: "",
//   name2: "全部",
//   name3: "全部",
//   timetitle: "创建时间",
//   name4: "",
//   name5: "全部",
//   name6: "全部",
//   name7: "全部",
//   name8: "全部",
// });
const fieldNames = reactive<dataSourceType>({
  label: "name",
  value: "id",
});
const titleOptions = [
  { label: "标题", value: 0 },
  { label: "作者", value: 1 },
  { label: "来源", value: 2 },
];
const typeOptions = [
  { label: "全部", value: null },
  { label: "草稿", value: 1 },
  { label: "审核中", value: 3 },
  { label: "待发布", value: 4 },
  { label: "已发布", value: 5 },
  { label: "未通过", value: 6 },
  { label: "下线", value: 7 },
  { label: "归档", value: 8 },
];
const timeOptions = [
  { label: "创建时间", value: 1 },
  { label: "发布时间", value: 2 },
];

// const sortOptions = [
//   { label: "默认", value: null },
//   { label: "创建时间升序", value: 1 },
//   { label: "创建时间降序", value: 2 },
//   { label: "按照每日", value: 3 },
// ];
// const securityOptions = [
//   { label: "全部", value: 0 },
//   { label: "创建时间升序", value: 1 },
//   { label: "创建时间降序", value: 2 },
//   { label: "按照每日", value: 3 },
// ];
const createOptions = [
  { label: "全部", value: null },
  { label: "后台创建", value: 1 },
  { label: "前台投稿", value: 2 },
  { label: "站群推送", value: 3 },
  { label: "站群采集", value: 4 },
  { label: "外部采集", value: 8 },
];
watch(
  () => props.channelId,
  (newVal, oldVal) => {
    if (newVal) {
      fetchChannelModelList();
    }
  },
  { deep: true }
);
const fetchUserSecretNameList = async (datas: dataSourceType = {}) => {
  const data = await request.fetchUserSecretNameList({ secretType: 1 });
  securityOptions.value = [{ name: "全部", id: null }, ...data];
};
const fetchContentSortTypes = async (datas: dataSourceType = {}) => {
  const data = await request.fetchContentSortTypes();
  var arr = [];
  for (var i in data) {
    if (i != "0") {
      arr.push({ value: i, label: data[i] });
    }
  }
  sortOptions.value = [{ label: "默认", value: null }, ...arr];
};
const changeTime = (data: any) => {
  if (timeType.value == 1) {
    resData.value.createTimeStart = data[0];
    resData.value.createTimeEnd = data[1];
  } else {
    resData.value.publishTimeStart = data[0];
    resData.value.publishTimeEnd = data[1];
  }
};
// const modleOptions = [
//   { label: "全部", value: 0 },
//   { label: "创建时间升序", value: 1 },
//   { label: "创建时间降序", value: 2 },
//   { label: "按照每日", value: 3 },
// ];
const swith = (num: number) => {
  isSwith.value = num;
  emit("swith", num);
};
//展示或者隐藏筛选框
const openorclose = () => {
  isOpen.value = !isOpen.value;
  emit("changeOpen", isOpen);
};
// 重置
const resetOptions = () => {
  timeType.value = 1;
  timeValue.value = [];
  emit("resetOptions");
  nextTick(() => {
    resData.value = props.resData;
  });
  // };
};
// 根据栏目ID加载内容模板对应的模型列表
const fetchChannelModelList = async () => {
  let params = {
    channelId: props.channelId || route.query.channelId,
  };
  if (!params.channelId) {
    return;
  }
  let data = await request.fetchChannelModelList(params);
  nextTick(() => {
    modelData.value = data;
    console.log(modelData.value, 'modelData')
  })

};
const addClick = async () => {
  if (!modelData.value) {
    message.warning("内容模型不能为空，请前往设置！");
  }
};

// 新增
const addRecord = (id: any, modelName: any) => {
  router.push({
    path: "/content/newContent",
    query: {
      id: id,
      channelId: props.channelId || route.query.channelId,
      modelName: modelName,
    },
  });
};
//跳转回收站
const batchAddRecord = () => {
  router.push({
    path: "/content/recyclingStation",
  });
};

// // 跳转定时任务
// const timedTaskRecord = () => {
//   router.push({
//     path: "/content/timedTask",
//   });
// };

// 归档
const fileRecord = () => {
  router.push({
    path: "/content/pigeonhole",
  });
};
// 排序
const sortRecord = () => {
  isSortVisible.value = true;
};
// 搜索
const search = () => {
  let prs = {
    pageCurrent: 1,
    pageSize: 10,
  };
  changePage(prs);
};
// 搜索-内容状态选择
const onSelectType = () => { };
// 搜索-内容类型选择
const onSelectType3 = () => { };
// 搜索-创建时间选择
const onSelectType4 = () => { };
// 搜索-排序方式选择
const onSelectType5 = () => { };
// 搜索-内容密集选择
const onSelectType6 = () => { };
// 搜索-内容创建方式选择
const onSelectType7 = () => { };
// 搜索-内容模型选择
const onSelectType8 = () => { };
//切换分页器
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  emit("changePage", data);
};

const getcontentSecret = async () => {
  contentSecretIsOpen.value = await request.getcontentSecret();
}
onMounted(() => {
  fetchUserSecretNameList();
  fetchContentSortTypes();
  fetchChannelModelList()
  getcontentSecret()
});
</script>

<style lang="less" scoped>
.contentHead {
  background-color: #fff;

  padding: 0 16px;
  min-height: 144px;

  .content_button {
    padding-bottom: 24px;
    display: flex;
    justify-content: space-between;

    >div {
      display: flex;
    }

    .displaySwitch {
      line-height: 20px;

      i {
        padding: 6px 8px;
        font-size: 20px;
        line-height: 20px;
        border: 1px solid #d9d9d9;
        color: rgba(0, 0, 0, 0.65);
        cursor: pointer;
      }

      i:first-child {
        border-radius: 2px 0px 0px 2px;
      }

      i:last-child {
        border-radius: 0px 2px 2px 0px;
      }

      .swithys {
        color: #1f6ded;
        background: #edf7ff;
        border: 1px solid #1f6ded;
      }
    }

    .addButton {
      display: flex;
      align-items: center;
      margin-right: 8px;

      .iconadd {
        font-size: 24px;
        margin-right: 4px;
      }
    }

    .importButton {
      margin-right: 8px;
    }
  }

  .select-content {
    width: 100%;
    background: rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: row;
    // justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 24px 24px 0;
    // margin-bottom: 24px;

    .select-item {
      margin-right: 24px;
      width: 354px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
      margin-bottom: 24px;

      .title {
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
      }

      .titleSelect {
        width: 100px;
        margin-right: 12px;
      }
    }

    .option-content {
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
      margin-bottom: 24px;
      width: 354px;
    }

    .option-content .openorclose {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 16px;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #1f6ded;

      .iconfont {
        margin-left: 5px;
      }
    }
  }
}

::v-deep(.select-item .ant-select) {
  width: 241px;
}

.ant-form-item {
  display: flex;
  flex-direction: column;

  .ant-form-item-label {
    width: auto;
    text-align: left;
  }
}
</style>
